<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- 
        拖拽事件 需要先给标签设置为可拖拽
        draggable="true"
        img标签默认可拖拽
     -->
    <!-- 
     target定义：
            target 属性规定哪个 DOM 元素触发了该事件。
            target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
            语法：
            event.target
            event.target.nodeName 　　//获取事件触发元素标签名（li，p，div，img，button…）
            event.target.id　　　　　　//获取事件触发元素id
            event.target.className　　//获取事件触发元素classname
            event.target.innerHTML　 //获取事件触发元素的内容（li） -->
    <img id="a1" draggable="false"
        src="https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/33428/39/16450/106681/6311cad7Ef9b3d856/f10720b7f8f38937.jpg!cr_1053x420_4_0!q70.jpg"
        alt="">
    <img id="a2"
        src="https://m15.360buyimg.com/mobilecms/jfs/t1/3230/40/20384/44107/62daf2d9E5c5e0e55/03ab360c40ddc266.jpg!cr_1125x449_0_166!q70.jpg"
        alt="">
    <img id="a3"
        src="https://m15.360buyimg.com/mobilecms/jfs/t1/110775/22/28940/94917/62e5bc6dE569b2244/5d14fc9f06d87341.jpg!cr_1125x449_0_166!q70.jpg"
        alt="">
    <script>
        // e.dataTransfer是一个对象 是拖拽事件提供的,在所有拖拽事件中公有的对象
        // setData是向dataTransfer 对象添加数据
        // 参数1是属性名
        // 参数2是属性值
        var imgs = document.images;
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].draggable = true;
            imgs[i].ondragstart = function (e) {
                console.log("开始拖拽了", e.target);
                // console.log("开始拖拽了", e.target.id);
            }
            imgs[i].ondragenter = function (e) {
                console.log("拖拽到其他元素上了",e.target);
            }
            imgs[i].ondragover = function (e) {
                console.log("在其他元素上进行移动了");
            }
            imgs[i].ondragleave = function (e) {
                console.log("移出其他元素");
            }
            imgs[i].ondragend = function (e) {
                console.log("结束拖拽了", e.target); //被拖拽的标签
            }
            // ondrop 事件在可拖动元素或选取的文本放置在 目标区域 时触发。(菜鸟教程)
            imgs[i].ondrop = function (e) {
                console.log("拖拽松开了", e.target); //在那个标签上松开的
            }
        }
        /* var imgs = document.images;
        for (let i = 0; i < imgs.length; i++) {
            // 阻止默认事件 可以阻止浏览器在新的窗口打开图片
            // 先个标签添加可拖拽属性, 才可以触发拖拽事件
            imgs[i].draggable = true;
            imgs[i].ondragstart = function (e) {
            //     e.preventDefault()
                console.log("开始拖拽了");
            //     console.log("开始拖拽了", e.target);
                // console.log("开始拖拽了", e.target.id);
                // e.dataTransfer.setData("URL", e.target.id);
                // var u = e.dataTransfer.getData("URL");
                // console.log(u);
            }
            imgs[i].ondragenter = function (e) {
                // console.log("拖拽到其他元素上了");
                // console.log("拖拽到其他元素上了",e.target);
            }
            imgs[i].ondragover = function (e) {
                console.log("在其他元素上进行移动了");
                // console.log("在其他元素上进行移动了",e.target);
            }
            imgs[i].ondragleave = function (e) {
                console.log("移除其他元素");
                // console.log("移出其他元素",e.target);
            }
            imgs[i].ondragend = function (e) {
                console.log("结束拖拽了");
                //
                // console.log("结束拖拽了", e.target); //被拖拽的标签
                // var u = e.dataTransfer.getData("URL");
                // console.log(u);
            }
            imgs[i].ondrop = function (e) {
                // 
                console.log("拖拽松开了", e.target); //在那个标签上松开的
            }
        } 
 */
    </script>
</body>

</html>